<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>产品列表</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
  <link rel="stylesheet" href="../../../static/wxui/lib/weui.min.css" th:href="@{/wxui/lib/weui.min.css}">
  <link rel="stylesheet" href="../../../static/wxui/css/jquery-weui.css" th:href="@{/wxui/css/jquery-weui.css}">
  <link rel="stylesheet" href="../../../static/wxui/css/style.css" th:href="@{/wxui/css/style.css}">
  <link rel="stylesheet" href="../../../static/wxui/css/hpshop.css" th:href="@{/wxui/css/hpshop.css}">
</head>
<body ontouchstart>
<!--顶部搜索-->
<header class='weui-header fixed-top'>
  <div class="weui-search-bar" id="searchBar">
    <div class="wy-header-icon-back" > <span></span></div>
    <form class="weui-search-bar__form" th:action="@{/goods/front/goProList}">
      <div class="weui-search-bar__box">
        <i class="weui-icon-search"></i>
        <input type="search" class="weui-search-bar__input" name="name" id="searchInput" placeholder="搜索您想要的商品" required th:value="${goods.name}">
        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
      </div>
      <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
        <i class="weui-icon-search"></i>
        <span>搜索您想要的商品</span>
      </label>
    </form>
    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
  </div>
  <div class="pro-sort">
    <div class="weui-flex">
      <div class="weui-flex__item"><div class="placeholder NormalCss" id="byDefault">综合</div></div>
      <div class="weui-flex__item"><div class="placeholder SortAscCss" id="bySale">按销量</div></div>
      <div class="weui-flex__item"><div class="placeholder SortDescCss" id="byPrice">按价格</div></div></div>
  </div>
</header>
<!--主体-->
<div class="weui-content" style="padding-top:85px;">
  <!--产品列表  滑动加载-->
  <div class="weui-pull-to-refresh__layer">
    <div class='weui-pull-to-refresh__arrow'></div>
    <div class='weui-pull-to-refresh__preloader'></div>
    <div class="down">下拉刷新</div>
    <div class="up">释放刷新</div>
    <div class="refresh">正在刷新</div>
  </div>
  <div id="list" class='demos-content-padded proListWrap'>
    <div class="pro-items" th:each="goods:${goodsPage.list}">
      <a th:href="@{'/goods/front/detail/'+${goods.id}}" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd">
          <img class="weui-media-box__thumb" th:src="${goods.coverimg}" alt="">
        </div>
        <div class="weui-media-box__bd">
          <h1 class="weui-media-box__desc" th:text="${goods.name}"></h1>
          <div class="wy-pro-pri">¥<em class="num font-15" th:text="${goods.price}">296.00</em>
          </div>
        </div>
      </a>
    </div>
  </div>
  <div class="weui-loadmore">
  </div>
</div>

<script src="../../../static/wxui/lib/jquery-2.1.4.js" th:src="@{/wxui/lib/jquery-2.1.4.js}"></script>
<script src="../../../static/wxui/lib/fastclick.js" th:src="@{/wxui/lib/fastclick.js}"></script>
<script src="../../../static/wxui/js/jquery-weui.js" th:src="@{/wxui/js/jquery-weui.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var pageNo = 2;
    var orderBy = [[${orderBy==null? 'es_goods.createTime':orderBy}]];
    var order1 = false;//综合默认降序
    var order2 = false;//销量默认升序
    var order3 = false;//价格默认升序
    var currentOrder = false;//流加载使用的升降序
    var $goods = [[${good}]];//request中传来的goods参数
    var $goodsSize = [[${goodsPage.list.size()}]];

    $(function() {
        FastClick.attach(document.body);

        $(".wy-header-icon-back").click(function(){
            window.history.back();
        });

        //上拉刷新
        $(document.body).pullToRefresh().on("pull-to-refresh", function() {
            setTimeout(function() {
                $("#time").text(new Date);
                $(document.body).pullToRefreshDone();
                pageNo = 1;
                $("#list").empty();
                buttonFunction();
            }, 2000);
        });

        //页面初始化--是否出现玩命加载中
        if($goodsSize>=6){
            $(".weui-loadmore").html('<i class="weui-loading"></i><span class="weui-loadmore__tips">玩命加载中</span>');
        }else if($goodsSize == 0){
            $(".weui-loadmore").html('<span class="weui-loadmore__tips">找不到哦，要不换个名字再试试？</span>');
        }else{
            $(".weui-loadmore").html('<span class="weui-loadmore__tips">已经到底了</span>');
        }

        // 流加载
        var loading = false;
        $(document.body).infinite().on("infinite", function() {
            if(loading) {
                return;
            }
            loading = true;
            setTimeout(function() {
                buttonFunction();
                loading = false;
            }, 1000);
        });

        $("#byDefault").click(function () {
            $(".weui-loadmore").html('<i class="weui-loading"></i><span class="weui-loadmore__tips">玩命加载中</span>');
            orderBy = 'es_goods.createTime';
            currentOrder = order1;
            pageNo = 1;
            $("#list").empty();
            buttonFunction();
        })

        $("#byPrice").click(function () {
            $(".weui-loadmore").html('<i class="weui-loading"></i><span class="weui-loadmore__tips">玩命加载中</span>');
            orderBy = 'es_goods.price';
            order2 = !order2;
            if(order2){
                $(this).removeClass('SortDescCss').addClass('SortAscCss');
            }else{
                $(this).removeClass('SortAscCss').addClass('SortDescCss');
            }
            currentOrder = order2;
            pageNo = 1;
            $("#list").empty();
            buttonFunction();

        })

        $("#bySale").click(function () {
            $(".weui-loadmore").html('<i class="weui-loading"></i><span class="weui-loadmore__tips">玩命加载中</span>');
            orderBy = 'es_goods.saleNum';
            order3 = !order3;
            if(order3){
                $(this).removeClass('SortDescCss').addClass('SortAscCss');
            }else{
                $(this).removeClass('SortAscCss').addClass('SortDescCss');
            }
            currentOrder = order3;
            pageNo = 1;
            $("#list").empty();
            buttonFunction();

        })
    });




    //ajax操作
    function buttonFunction() {
        $.ajax({
            type: "post",
            url: "/goods/front/loadGoodsData",
            data: {
                name: $goods.name,
                goodsTypeId: $goods.goodsTypeId,
                pageNo: pageNo,
                orderBy: orderBy,
                order: currentOrder
            },
            dataType: 'json',
            success: function (data) {
                if (pageNo <= data.data.pages) {
                    appendContent(data.data.list);
                    pageNo += 1;
                    if(data.data.pages <=1){
                        $(".weui-loadmore").html('<span class="weui-loadmore__tips">已经到底啦</span>');
                    }
                } else {
                    $(".weui-loadmore").html('<span class="weui-loadmore__tips">已经到底啦</span>');
                }
            }
        })
    }

    //拼接字符串将商品拼接进内容
    function appendContent(list){
        var content = "";
        $.each(list,function (i,n) {
            content += '<div class="pro-items"><a href="/goods/front/detail/'+n.id+'" class="weui-media-box weui-media-box_appmsg">';
            content += '<div class="weui-media-box__hd"><img class="weui-media-box__thumb" src="'+n.coverimg+'" alt=""></div>';
            content += '<div class="weui-media-box__bd"><h1 class="weui-media-box__desc">'+n.name;
            content += '</h1><div class="wy-pro-pri">¥<em class="num font-15">'+n.price+'</em></div>';
            content += '</div></a></div>'
        })
        $("#list").append(content);
    }



</script>
</body>
</html>
